<template>
  <div class="login">
    <div class="form-box">
      <div class="form-first clear">
        平台登录
      </div>
      <div class="form clear">
        <div class="form-label">
          <img src="@/assets/images/loginU.png" width="26px" />
        </div>
        <div class="form-input">
          <input v-model="phone" type="text" placeholder="请填写手机号码" />
        </div>
      </div>
      <div class="form clear" style="margin-bottom:10px;">
        <div class="form-label">
          <img src="@/assets/images/loginP.png" width="26px" />
        </div>
        <div class="form-input">
          <input
            v-model="password"
            type="password"
            placeholder="请填写6~18位密码"
          />
        </div>
      </div>
      <div class="forget-pwd">
        <div class="forget-left">
          <router-link :to="{ name: 'register' }" exact class="active" tag="a"
            >注册</router-link
          >
        </div>
        <div class="forget-right">
          <router-link :to="{ name: 'forget' }" exact class="active" tag="a"
            >忘记密码</router-link
          >
        </div>
      </div>
      <button class="form-btn" @click="loginFn">登录</button>
      <!-- <div class='options one'
           :style='optionsName == 'main' ? 'background: rgba(31, 145, 226, 1);' : '''
           @click='tag('main')'>小程序平台</div>
      <div class='options two'
           :style='optionsName == 'merchants' ? 'background: rgba(31, 145, 226, 1);' : '''
           @click='tag('merchants')'>外卖商家</div> -->
    </div>
  </div>
</template>

<script>
import Token from "@/utils/token";
import { LOGIN } from "./service";

export default {
  mixins: [Token],
  data() {
    return {
      phone: "",
      password: "",
      optionsName: "main"
    };
  },
  created() {
    if (this.$store.state._token) {
      this.$router.push({ name: "websiteHome" });
      this.$message({
        message: "已登录",
        type: "success"
      });
    }
  },
  methods: {
    async loginFn() {
      if (this.password.length < 6 || this.password.length > 18) {
        this.$message({
          message: "请输入密码",
          type: "error"
        });
        return;
      }
      let params = {};
      params.phone = this.phone;
      params.password = this.password;
      if (!/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)) {
        this.$message({
          message: "请输入正确手机号",
          type: "error"
        });
        return;
      }

      await LOGIN(params).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.$message({
            message: "登录成功",
            type: "success"
          });

          this.$store.commit("qiniu", data.qiniu_host);
          this.$store.commit("_token", data.id);
          this.$store.commit("app_id", data.app_id);
          this.$store.commit("app_name", data.phone);
          this.$store.commit("group_id", data.group_id);
          this.$router.push({ name: "step1" });
        } else {
          this.$message({
            message: msg,
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import "../../assets/scss/login";
</style>
